<template>
  <div v-loading="iswraploading" class="prossececontainer">
    <el-dialog
      title="请给出预警信息"
      :visible.sync="isDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        clearable
        v-model="textareavalue"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="resetwarning(warningid)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <div class="selectHeader">
      <div class="select-wrapper">
        <div class="selectBox">
          <div class="selectTitle">
            <i class="iconfont icon-sousuo" />按条件查询
          </div>

          <div style="display: flex; align-items: center; padding: 10px">
            <el-input
              v-model="listquery.nickName"
              clearable
              style="width: 200px; margin-right: 10px"
              placeholder="编制单位名称"
            ></el-input>
            <el-input
              v-model="listquery.key"
              clearable
              placeholder="乡镇名称"
              style="width: 200px; margin-right: 10px"
            ></el-input>
            <el-select
              v-model="listquery.progressName"
              clearable
              style="width: 200px; margin-right: 10px"
              placeholder="阶段进度"
            >
              <el-option
                v-for="(item, index) in rateArr"
                :label="item"
                :value="item"
                :key="index"
              >
              </el-option>
            </el-select>
            <el-button type="success" icon="el-icon-search" @click="search"
              >搜索</el-button
            >
            <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </div>
          <div style="margin-top: 10px">
            <span style="color: #4778c7">规划编制类型:</span>
            <el-radio-group
              size="small"
              v-model="listquery.planType"
              @change="valueChange"
            >
              <el-radio-button border label="">全部</el-radio-button>
              <el-radio-button
                border
                v-for="(item, index) in options2"
                :key="index"
                :label="item"
                >{{ item }}</el-radio-button
              >
            </el-radio-group>
          </div>
          <!-- <div style="margin-top: 10px;margin-left:10px">
                    <span style="color: #4778c7">是否合并编制:</span>
                    <el-radio-group size="small" v-model="listquery.isMerge" @change="valueChange">
                        <el-radio-button border label="true">合并</el-radio-button>
                        <el-radio-button border label="false">不合并</el-radio-button>
                    </el-radio-group>
                </div> -->

          <div class="row-area">
            <span style="color: #4778c7">行政区域选择：</span>
            <el-select
              placeholder="所属市选择"
              v-model="currentLiindex"
              @change="cityChange"
              v-if="iscityshow"
              clearable
              @clear="cityclear"
            >
              <el-option
                v-for="(item, index) in citylist"
                :key="item.id"
                :label="item.label"
                :value="index"
              />
            </el-select>
            <ul class="countryArea" v-if="areaShow">
              <li
                v-for="(item, i) in cityChildren"
                :key="i"
                @click="liChange(i)"
                :class="{ areaActive: i == currentareaindex }"
              >
                {{ item.label }}
              </li>
            </ul>
            <el-select
              placeholder="乡镇选择"
              v-model="town"
              @change="townChange"
              v-if="istownshow"
              clearable
            >
              <el-option
                v-for="(item, index) in townlist"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <div v-loading="isloading">
      <div class="header">
        <div><i class="el-icon-d-arrow-right"></i>进度信息列表</div>

        <div style="display: flex">
          <el-upload
            class="upload-demo"
            action=""
            :http-request="unitLinkmore"
            :show-file-list="false"
            accept=".zip"
            :disabled="currentid.length == 0"
          >
            <el-button
              type="primary"
              icon="el-icon-link"
              v-if="role == '市州用户' || role == '区县用户'"
              :disabled="currentid.length == 0"
              style="margin-right: 10px"
              >组织准备上传</el-button
            >
          </el-upload>
          <el-upload
            class="upload-demo"
            action=""
            :http-request="unitLinkmore1"
            :show-file-list="false"
            accept=".zip"
            :disabled="currentid.length == 0"
          >
            <el-button
              type="primary"
              icon="el-icon-link"
              :disabled="currentid.length == 0"
              style="margin-right: 10px"
              v-if="role == '市州用户' || role == '区县用户'"
              >技术准备上传</el-button
            >
          </el-upload>
          <el-button
            type="success"
            v-if="role == '市州用户' || role == '自然资源厅用户'"
            plain
            icon="el-icon-download"
            @click="gettownprogressexcel"
            >导出excel</el-button
          >
          <el-button
            type="success"
            v-if="
              role == '市州用户' ||
              role == '区县用户' ||
              role == '自然资源厅用户'
            "
            plain
            icon="el-icon-download"
            @click="geteverytownprogressexcel"
            >乡镇进度导出</el-button
          >
        </div>
        <div style="display: flex; align-items: center">
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            @click="gettownprogresslistout"
            v-if="role == '超级管理员' || role == '自然资源厅用户'"
            >导出乡镇编制进度信息excel</el-button
          >
        </div>
      </div>
      <div class="totalmessage">
        <span v-if="this.listquery.city != ''">{{ this.listquery.city }}</span
        ><span v-if="this.listquery.country != ''">{{
          this.listquery.country
        }}</span
        >共有<span>{{ total }}</span
        >乡镇
      </div>
      <el-table
        :data="tableData"
        ref="selectTable"
        @selection-change="handleSelectionChange"
        :span-method="objectSpanMethod"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :default-expand-all="isExpand"
        @expand-change="expand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="100" prop="id">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="town" label="乡镇名" width="150" />
        <el-table-column label="所属行政区划" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.city }}-{{ scope.row.country }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="planType" label="编制方式" width="200" />
        <el-table-column label="阶段完成进度">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div @click="openstate(scope.row.progressList[item])">
                <el-progress
                  :percentage="scope.row.progressList[item] ? 100 : 0"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="nickName" label="编制单位" width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.nickName.length > 0" class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.nickName"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
            <span v-else>暂未被编制</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactNamePhone"
          label="联系人+电话"
          width="250"
        >
          <template slot-scope="scope">
            <div class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.contactNamePhone"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :fileList="fileList"
        :title="title"
      ></right-div>

      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import tableHeader from "./components/TableHeader";
import {
  gettownprogressexcel,
  geteverytownprogressexcel,
  gettownprogresslistout,
} from "@/api/town.js";
import { getnum, checknum } from "@/api/line.js";
import { progresslist, uploadxzmostzip } from "@/api/town.js";
import rightDiv from "@/views/unitIndex/components/czrightDiv";
import queryMixin from "@/mixins/countquery1.js";
import { mapGetters } from "vuex";
export default {
  components: {
    tableHeader,
    rightDiv,
  },

  mixins: [queryMixin],

  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        completionYear: "",
        city: "",
        country: "",
        town: "",
        progressName: "",
        subProgressTitle: "",
        isMerge: false,
      },
      rateArr: [
        "组织准备",
        "技术准备",
        "基础调研",
        "编制方案",
        "咨询论证",
        "审查审议",
        "规划公示",
        "成果审批",
        "规划公告",
      ],
      options2: ["总规统筹", "单独编制", "合并编制"],

      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true,
      },
      isWriteVisible: false,
      years: ["2021", "2022", "2023", "已完成"],
      isDialogShow: false,
      isloading: false,
      total: 0,
      title: "",
      warningid: "",
      textareavalue: "",
      valueData: "",
      rightPanelShow: false,
      iswraploading: false,
      nowuserarea: "",
      resultList: [],
      fileList: [],
      isExpand: false,
      //行政区划选择
      role: "",
      currentid: [],
      filterShow: true,
      form: {},
      AAA: {},
      tableData: [],
    };
  },
  mounted() {
    this.AAA = new Map();
    this.role = this.$store.getters.user.roles[0].name;
    this.nowuserarea = this.$store.getters.user.area;
    let v = false;
    this.getdata();
  },
  methods: {
    search() {
      this.listquery.currentPage = 1;
      this.listquery.pageSize = 10;
      this.getdata();
    },
    reset() {
      this.listquery = {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        completionYear: "",
        village: "",
        progressName: "",
        subProgressTitle: "",
        isMerge: false,
      };
    },

    handleSelectionChange(val) {
      this.currentid = [];
      val.forEach((element) => {
        this.currentid.push(element.id);
      });
    },

    unitLinkmore(data) {
      let file = data.file;
      let name = file.name;
      let fileType = name.split(".")[name.split(".").length - 1];
      if (fileType != "zip") {
        this.$message.error("仅支持zip文件");
        return;
      }
      let datafile = new FormData();
      datafile.append("file", file);
      datafile.append("name", "组织准备");
      datafile.append("filename", name);
      datafile.append("ids", this.currentid);
      this.isloading = true;
      getnum(name).then((res) => {
        let last = res.last;
        let num = res.num;
        if (last == 0) {
          this.getuploadfirstzip(datafile);
        } else {
          this.checkline(num);
        }
      });
    },
    unitLinkmore1(data) {
      let file = data.file;
      let name = file.name;
      let fileType = name.split(".")[name.split(".").length - 1];
      if (fileType != "zip") {
        this.$message.error("仅支持zip文件");
        return;
      }
      let datafile = new FormData();
      datafile.append("file", file);
      datafile.append("name", "技术准备");
      datafile.append("filename", name);
      datafile.append("ids", this.currentid);
      this.isloading = true;
      getnum(name).then((res) => {
        let last = res.last;
        let num = res.num;
        if (last == 0) {
          this.getuploadfirstzip(datafile);
        } else {
          this.checkline(num);
        }
      });
    },
    getuploadfirstzip(file) {
      uploadxzmostzip(file, (progress) => {
        // this.$forceUpdate;
        // this.progress = progress;
      })
        .then((res) => {
          if (res.success) {
            this.getdata();
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
              offset: 0,
            });
          } else {
            this.$notify.error({
              title: "上传失败",
              message: res.message,
            });
          }
        })
        .catch((e) => {
          this.$message.error(e.response.data.message);
        });
    },
    checkline(num) {
      this.type = 2;
      checknum(num).then((res) => {
        let last = res.last;
        this.lineNum = last;
        if (last != 0) {
          setTimeout(() => {
            this.checkline(num);
          }, 10000);
        } else {
          this.getjindubao();
        }
      });
    },
    gettownprogressexcel() {
      this.isloading = true;
      gettownprogressexcel().then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "乡镇进度统计信息表.xlsx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    geteverytownprogressexcel() {
      this.isloading = true;
      geteverytownprogressexcel().then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "乡镇编制进度信息表.xlsx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    gettownprogresslistout() {
      this.isloading = true;
      gettownprogresslistout(this.listquery.completionYear).then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "乡镇编制进度信息.xlsx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url

        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    expand(data, row) {
      data.state = row;

      this.AAA.set(data.id, row);
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 3) {
        if (row.children && row.state) {
          return {
            rowspan: row.children.length + 1,
            colspan: 1,
          };
        } else if (row.isChildren) {
          return {
            rowspan: 1,
            colspan: 0,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },

    handleChange() {},

    writeLink() {
      alert("111");
    },
    query(id) {
      this.$router.push("/stage/stageCount");
    },
    openstate(data) {
      this.title = data.name;
      this.rightPanelShow = true;
      this.resultList = [];
      let fileList = data.files;
      fileList.forEach((element) => {
        let label = element.substring(element.lastIndexOf("/") + 1);
        let obj = {
          label: label,
          url: element,
        };
        this.resultList.push(obj);
      });
    },

    closeRightPane() {
      this.rightPanelShow = false;
    },

    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      this.isloading = true;
      this.listquery.type = "qxsh";
      let res = await progresslist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.tableData.forEach((element) => {
        if (element.children) {
          if (this.AAA.has(element.id)) {
            element.state = this.AAA.get(element.id);
          } else {
            element.state = this.isExpand;
          }
        }
      });
      this.AAA = new Map();
      this.isloading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../public/css/table.scss";

.eltable thead .el-table-colume-selection .cell {
  display: none;
}

.selectTitle {
  color: #4778c7;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}

.totalmessage {
  padding: 10px 0px;
  margin-right: 20px;
  border-top: 1px dashed #ccc;
  font-size: 24px;
  color: #4778c7;
}

.onemapul li {
  float: left;
  border: 1px solid #4778c7;
  padding: 1px 19px;
  margin-right: 3px;
}

.onemapul .activeli {
  background-color: #4778c7;
  color: #fff;
  font-weight: 700;
}

::v-deep .el-progress-bar__outer {
  height: 15px !important;
}

::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}

.rightbutton {
  display: flex;
}

.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .el-progress {
    width: 130px;
  }

  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}

.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}

.noclick {
  pointer-events: none !important;
}

.zhuanhang {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prossececontainer {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

.row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 35px;
  margin-right: 5px;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #4778c7;

  i {
    color: #4778c7;
  }
}

.icondiv {
  display: flex;
  justify-content: center;

  span {
    //  background-color: #f2f2f2;
    display: inline-block;
    padding: 5px 5px;
    margin: 0 auto;
    font-size: 12px;
    color: #4778c7;
  }
}

.label-title {
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  vertical-align: middle;
  padding: 0 12px 0 0;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: 700;
}

.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }

  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}

.jieduanul {
  list-style: none;
  margin: 0;
  padding: 5px 0px;
  width: 100%;
  display: flex;
  justify-content: center;

  li {
    float: left;
    margin-right: 35px;
    height: 30px;
    font-size: 10px;
    border-radius: 3px;
    padding: 5px 25px;
    background-color: #fff;
    border: 1px solid #4778c7;
    cursor: pointer;
  }

  .active {
    background-color: #4778c7;
    color: #fff;
  }

  .noclick {
    pointer-events: none;
  }
}

::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}

.warn {
  background-color: #cd5555;
  cursor: pointer;
}

// ::v-deep .lastaaa .el-input__inner {
//   height: 32px;
//   width: 45%;
// }
::v-deep .el-table {
  position: relative;
}
</style>
